<template>
  <div class="chat-app">

    <div class="user-list">
      <div class="user-item"
        v-for="user in users" :key="user.id" @click="setActiveUser(user)">
        
        <img :src="user.avatar" class="avatar"/>
        <div class="user-info">
          <div class="name">{{ user.nickname }}</div>
        </div>

      </div>
    </div>

    <div class="chat-box">
      <div class="chat-header">
        <h3>{{ currentNicename }}</h3>
      </div>
      <div class="messages">
        <div class="message"
          v-for="msg in msgs" :key="msg.id"
          :class="{ 'received': isSend(msg.userId) }">
          {{ msg.content }}
          {{ msg.userId }}
          {{ server.currentUserId }}
        </div>
      </div>
      <div class="input-area">
        <input 
          v-model="newMessage" 
          @keyup.enter="handleSendMessage"
          placeholder="输入消息..."
        />
        <button @click="handleSendMessage">发送</button>
      </div>
    </div>


  </div>
</template>
















<script setup>
import { onMounted, ref } from 'vue';
import { getUserDialogue } from '@/api/BlogUser';
import { useRouter } from 'vue-router';
import { getDialogues } from '@/api/BlogUser';
import { sendMessage } from '@/api/BlogUser';
import server from '@/api/server';
import xixiPng from '@/assets/xixi.png'


const isSend = (userId)=>{
  return userId==server.currentUserId
}

const router = useRouter()

const currentNicename = ref('张三');

const currentGroupId = ref(0);

const newMessage = ref('');

const users = ref([{
  id: 1,
  nickname: '张三',
  avatar: xixiPng
}]);

const msgs = ref([{
  id: 1,
  userId: 1,
  groupId: 1,
  content: 'asdfasdf',
  createTime: 1749087637000
}]);

onMounted(()=>{
  if(server.token == ''){
    router.push("/notLogin")
    return
  }
  try {
    getUserDialogue(server.token).then((res)=>{
      if (res.data.code==0) {
        console.log(res.data.data)
        users.value = res.data.data;
        currentGroupId.value = users.value[0].id
        currentNicename.value = users.value[0].nickname
        selectDialogues()
      } else {
        alert("获取聊天对象失败："+res.data.msg)
      }
    })
  } catch (error) {
        alert("获取聊天对象失败："+error)
  }
})

const selectDialogues = ()=>{
  const params = {
    groupId: currentGroupId.value
  }
  try {
    getDialogues(server.token, params).then((res)=>{
      if (res.data.code==0) {
        msgs.value = res.data.data;
        console.log(msgs.value)
      } else {
        alert("获取聊天记录失败："+res.data.msg)
      }
    })
  } catch (error) {
        alert("获取聊天记录失败："+error)
  }
}

function setActiveUser(user) {
  currentGroupId.value = user.id;
  currentNicename.value = user.nickname;
  selectDialogues()
}

function handleSendMessage() {
  if (!newMessage.value.trim()) return;
  const params = {
    groupId: currentGroupId.value,
    content: newMessage.value
  }
  try {
    sendMessage(server.token, params).then((res)=>{
      if (res.data.code==0) {
        console.log(res.data.data)
        newMessage.value = '';
        selectDialogues()
      } else {
        alert("添加聊天记录失败："+res.data.msg)
      }
    })
  } catch (error) {
        alert("添加聊天记录失败："+error)
  }
}
</script>


















<style scoped>

/* 
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
} */

img.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.user-item {
  display: flex;flex-flow: row nowrap;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}


.chat-app {
  display: flex;
  height: 500px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.user-list {
  width: 250px;
  border-right: 1px solid #eee;
  overflow-y: auto;
}

.user-item:hover {
  background: #f9f9f9;
}

.user-item.active {
  background: #e6f7ff;
}

.user-info {
  flex: 1;
}

.name {
  font-weight: 500;
}

.last-msg {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

.chat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-header {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.messages {
  display: flex;flex-flow: column nowrap;
  justify-content: start;
  /* flex: 1; */
  padding: 12px;
  overflow-y: auto;
}

.message {
  max-width: 70%;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #a73030;
  margin-right: auto;
}

.received {
  margin: 0;
  margin-top: 10px;
  margin-left: auto;
  align-content: end;
  background: #3c82d2;
}

.input-area {
  display: flex;
  padding: 12px;
  border-top: 1px solid #eee;
}

.input-area input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 8px;
}

.input-area button {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.input-area button:hover {
  background: #40a9ff;
}
</style>